<template>
  <div class="show-search-item-con" v-if="newList.length > 0">
    <a-tag size="medium" style="margin-right: 8px" closable color="#e9f1ff" v-for="item of newList" :key="item.label" @close="del(item)">
      <span style="color: #1966ff" v-if="item.value.split(',').length <= 3">{{ item.label }}：{{ item.value }}</span>

      <a-popover v-else position="br">
        <span style="color: #1966ff">{{ item.label }}：{{ item.value.split(',')[0] }}等{{ item.value.split(',').length }}项</span>
        <template #content>
          <div style="width: 200px; max-height: 200px">
            <p v-for="item1 of item.value.split(',')">{{ item1 }}</p>
          </div>
        </template>
      </a-popover>
    </a-tag>
    <span @click="clearAll" style="margin-left: 5px; font-size: 12px; color: #999; cursor: pointer">清除所有</span>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import _ from 'lodash-es'
  export default defineComponent({
    name: 'ShowSearchItem',
    props: ['list'],
    emits: ['del'],
    setup(props, { emit }) {
      const del = (data: any) => {
        emit('del', data)
      }

      const newList: any = computed(() => {
        if (props.list.length > 1) {
          return _.cloneDeep(props.list).sort((a: any, b: any) => a.sort - b.sort)
        } else {
          return _.cloneDeep(props.list)
        }
      })

      const clearAll = () => {
        let list = _.cloneDeep(props.list)
        list.forEach((e: any) => {
          del(e)
        })
      }
      return {
        del,
        clearAll,
        newList,
      }
    },
  })
</script>

<style lang="less" scoped>
  .show-search-item-con {
    margin-top: 5px;
  }
</style>
